import { useState, useEffect } from "react";
import { Form, Image, Row, Col, Space, Button } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { CommonTable } from "@/pages/OrderModule/common/components/CommonTable";
import { getBoxOrderGoods } from "../service";
const OrderDetailModal = ({ visible, handleCancel, records }) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);
	const [list, setList] = useState([]);

	const orderDetail = async () => {
		const { data, success } = await getBoxOrderGoods({ outboundOrderNo: records.outboundNo });
		setList(data);
	};
	useEffect(() => {
		orderDetail();
	}, [visible]);
	const columns = [
		{
			title: "图片",
			dataIndex: "skuImage",
			render: (value, record, i) => <Image width={60} src={value} />
		},
		{
			title: "商品信息",
			dataIndex: "skuName",
			width: 200
		},
		{
			title: "数量",
			dataIndex: "skuQuantity"
		},
		{
			title: "已分拣数",
			dataIndex: "sortedNum"
		},
		{
			title: "商品唯一码",
			dataIndex: "uniqueCodeList",
			width: 200,
			render: (value, record, i) => (
				<div>
					{value.map(x => (
						<div>{x.slice(0, -4)}</div>
					))}
				</div>
			)
		},
		,
		{
			title: "分拣状态",
			dataIndex: "uniqueCodeList",
			width: 100,
			render: (value, record, i) => (
				<div>
					{value.map(x => (
						<span>
							{x.slice(-3) == "未分拣" && <div style={{ color: "rgba(240, 61, 41, 1)" }}>{x.slice(-3)}</div>}
							{x.slice(-3) == "已分拣" && <div style={{ color: "rgba(0, 188, 117, 1)" }}>{x.slice(-3)}</div>}
						</span>
					))}
				</div>
			)
		}
	];

	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};

	return (
		<CommonModal
			title={{ title: "订单详情" }}
			visible={true}
			width={"871px"}
			onCancel={onCancel}
			minHeight="150px"
			footer={
				<Row justify="end">
					<Col>
						<Space>
							<Button size="middle" type="primary" onClick={onCancel}>
								取消
							</Button>
						</Space>
					</Col>
				</Row>
			}
		>
			<div>
				<span>仓库订单号：{records.outboundNo}</span>
				<span style={{marginLeft: '32px'}}>系统订单号：{records.systemNo}</span>
			</div>
			<CommonTable rowKey="key" scroll={{ y: `calc(100vh - 250px)` }} columns={columns} dataSource={list} pagination={false} />
		</CommonModal>
	);
};

export default OrderDetailModal;
